@import "./common/mixin.styl"

html,body
  width 100%
  background rgb(255,255,255)
  overflow-x hidden
  .detail-wrapper
    padding-top computedNum(62)
    .header
      position fixed
      top 0
      left 0
      background rgb(252,252,252)
      width computedNum(335)
      height computedNum(50)
      line-height computedNum(50)
      z-index 9
      padding computedNum(0) computedNum(20)
      font-size 0
      .back-wrapper
        width computedNum(50)
        padding-left computedNum(15)
        background url("../img/back-icon.png") no-repeat left center
        background-size computedNum(8.5) computedNum(15)
        font-size computedNum(16)
        font-family SimHei
      .title
        width computedNum(205)
        font-size computedNum(16)
        vertical-align top
        font-family SimHei
    .book-detail-wrapper
      padding 0 computedNum(20)
      font-size 0
      .left-wrapper
        width computedNum(112)
        height computedNum(142)
        margin-right computedNum(16)
        box-shadow 1px 1px 10px 1px #ccc
      .right-wrapper
        font-size computedNum(13)
        color rgb(153,153,153)
        vertical-align top
        .book-name
          width computedNum(205)
          font-size computedNum(18)
          color #000000
          margin-bottom computedNum(11)
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
        .words-and-status
          margin-bottom computedNum(9)
          .status
            margin-left computedNum(10)
        .read-count-p
          margin-bottom computedNum(11)
          .read-count
            color rgb(241,124,124)
            font-size computedNum(16)
        .add-shelf
          margin-bottom computedNum(11)
          font-size computedNum(15)
          color #000000
          &.added
            display none
          .add-shelf-icon
            padding-left computedNum(13)
            background url("../img/add-shelf-icon.png") no-repeat center center
            background-size computedNum(13) computedNum(16)
            margin-right computedNum(10)
        .cat-list
          li
            font-size computedNum(11)
            margin-right computedNum(6)
            padding computedNum(3) computedNum(4)
            color #ffffff
            background rgb(246,151,151)
            border-radius computedNum(3)
    .book-desc-wrapper
      margin-top computedNum(10)
      padding 0 computedNum(20)
      font-size 0
      .desc-detail
        width computedNum(282)
        margin-right computedNum(22)
        font-size computedNum(14)
        color rgb(153,153,153)
        p
          text-align justify
          &.limit
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-box-orient vertical
            -webkit-line-clamp 3
      .extend
        font-size computedNum(14)
        color #000000
        text-decoration underline
        vertical-align bottom
    .read-and-gift-wrapper
      margin-top computedNum(24)
      margin-bottom computedNum(15)
      padding 0 computedNum(20)
      font-size 0
      .read-btn-wrapper
        font-size computedNum(15)
        width computedNum(199)
        height computedNum(36)
        margin-right computedNum(11)
        background #fb7575
        color #ffffff
        div
          height 100%
          .icon-and-start
            width computedNum(90)
            height computedNum(19)
            margin 0 auto
            padding-top computedNum(8.5)
            .read-icon
              width computedNum(17)
              height computedNum(20)
              background url("../img/read-icon.png") no-repeat center center
              background-size computedNum(17) computedNum(17)
              vertical-align top
              margin-right computedNum(11)
      .gift-btn-wrapper
        font-size computedNum(15)
        width computedNum(125)
        height computedNum(35)
        border-1px-all(#fb7575)
        vertical-align top
        .icon-and-gift
          width computedNum(90)
          height computedNum(19)
          margin 0 auto
          margin-top computedNum(8.5)
          color #fb7575
          .gift-icon
            width computedNum(17)
            height computedNum(20)
            background url("../img/gift-icon.png") no-repeat center center
            background-size contain
            vertical-align top
            margin-right computedNum(11)
    .buy-whole-wrapper
      p
        width computedNum(335)
        margin-left computedNum(20)
        margin-bottom computedNum(15)
        height computedNum(30)
        line-height computedNum(30)
        font-size computedNum(15)
      .sell-book
        color #f65757
        background #ffeded
        border-1px-all(#ff9191)
        display none
      .has-bought
        display none
        color #ffffff
        background #cccccc
    .catalog-wrapper
      padding 0 computedNum(20)
      .head
        margin-top computedNum(15)
        .left-wrapper
          font-size computedNum(16)
          color rgb(241,74,74)
          padding-left computedNum(10)
          border-left computedNum(3) solid rgb(241,74,74)
        .right-wrapper
          width computedNum(156)
          overflow hidden
          text-overflow ellipsis
          white-space nowrap
          font-size computedNum(14)
          color #666666
      .four-chapter
        margin-top computedNum(20)
        li
          font-size computedNum(14)
          margin-bottom computedNum(20)
      .more-catalog
        margin-bottom computedNum(15)
        p
          width computedNum(80)
          margin 0 auto
          color #f86161
          font-size computedNum(14)
          .more-catalog-icon
            padding computedNum(3.5) computedNum(4.5)
            background url("../img/more-icon.png") no-repeat center center
            background-size contain
            margin-left computedNum(10)
    .like-wrapper
      padding computedNum(20) computedNum(20) computedNum(0) computedNum(20)
      .head
        margin-bottom computedNum(19)
        .title
          font-size computedNum(16)
          color #f86161
          padding-left computedNum(10)
          border-left computedNum(3) solid rgb(241,74,74)
        .more
          font-size computedNum(13)
          color #666666
          height computedNum(22)
          line-height computedNum(22)
          .more-icon
            width computedNum(12)
            height computedNum(21)
            background url("../img/refresh-icon.png") no-repeat center center
            background-size computedNum(12) computedNum(12)
            margin-left computedNum(5)
            vertical-align top
      .like-content
        font-size 0
        li
          margin 0 computedNum(17) computedNum(20) 0
          vertical-align top
          &:nth-child(3n)
            margin-right computedNum(0)
          div
            width computedNum(100)
            height computedNum(127)
            box-shadow 1px 1px 10px 1px #ccc
          p
            font-size computedNum(13)
            margin-top computedNum(10)
            width computedNum(100)
            overflow hidden
            text-overflow ellipsis
            display -webkit-box
            -webkit-box-orient vertical
            -webkit-line-clamp 2
    .present-wrapper
      padding computedNum(20) computedNum(20) computedNum(0) computedNum(20)
      .head
        margin-bottom computedNum(19)
        .title
          font-size computedNum(16)
          color #f86161
          padding-left computedNum(10)
          border-left computedNum(3) solid rgb(241,74,74)
        .present
          font-size computedNum(14)
          color #f86161
          height computedNum(22)
          line-height computedNum(22)
          .present-icon
            width computedNum(14)
            height computedNum(20)
            background url("../img/present-icon.png") no-repeat center center
            background-size computedNum(14) computedNum(14)
            margin-right computedNum(5)
            vertical-align top
      .present-content
        padding computedNum(0) computedNum(20)
        font-size 0
        ul
          li
            padding computedNum(15) 0 computedNum(20) 0
            border-1px-bottom(rgb(235,235,235))
            .head-img-wrapper
              width computedNum(33)
              height computedNum(33)
              vertical-align top
              margin-right computedNum(10)
              img
                width 100%
                border-radius 50%
            .present-detail-wrapper
              font-size computedNum(11)
              color #999999
              .data-time
                margin-top computedNum(5)
              .present-detail
                font-size computedNum(14)
                color #333333
                margin-top computedNum(22)
                .present-item
                  color rgb(248,97,97)
                  padding 0 computedNum(5)
                .shit-icon
                  padding computedNum(10) computedNum(20)
                  background-position center center
                  background-repeat no-repeat
                  background-size contain
                  margin-left computedNum(5)
        .more-present
          margin computedNum(20) 0
          p
            width computedNum(80)
            margin 0 auto
            color #f86161
            font-size computedNum(14)
            .more-present-icon
              padding computedNum(3.5) computedNum(4.5)
              background url("../img/more-icon.png") no-repeat center center
              background-size contain
              margin-left computedNum(10)
    .back-top-wrapper
      position fixed
      right computedNum(10)
      bottom computedNum(50)
      width computedNum(35)
      height computedNum(35)
      background url("../img/back-top-icon.png") no-repeat center center
      background-size computedNum(35) computedNum(35)
      z-index 9
      opacity 0
    .select-present-mask
      position fixed
      right 0
      bottom 0
      width 100%
      height 100%
      background rgba(0,0,0,0.2)
      z-index 10
      display none
      .select-present-top-mask
        right 0
        top 0
        width 100%
        height 100%
        z-index 10
      .select-present-wrapper
        right 0
        bottom 0
        width 100%
        height computedNum(308)
        background #ffffff
        z-index 11
        .present-list
          font-size 0
          li
            position relative
            display inline-block
            width computedNum(125)
            height computedNum(125)
            border-1px-all(rgb(236,236,236))
            .border-line
              position absolute
              top 0
              left 0
              width computedNum(122.3)
              height computedNum(122.3)
              border computedNum(1) solid #f86161
              display none
            &:after
              border-top none
              border-left none
            &:nth-child(3n)
              &:after
                border-right none
            .present-item
              font-size computedNum(12)
              color #999999
              .present-img
                width computedNum(69.8)
                height computedNum(57)
                margin computedNum(10) computedNum(27.6) computedNum(10) computedNum(27.6)
              .present-name
                margin-bottom computedNum(7)
        .present-btn-wrapper
          padding 0 computedNum(20)
          font-size 0
          .rest-coin
            width computedNum(158)
            height computedNum(79)
            line-height computedNum(65)
            font-size computedNum(13)
            color #333333
            vertical-align top
          .recharge-btn
            color #f86161
            font-size computedNum(14)
            height computedNum(79)
            line-height computedNum(64)
            padding 0 computedNum(10)
          .present-btn
            width computedNum(95)
            height computedNum(35)
            line-height computedNum(35)
            background #fe7676
            font-size computedNum(15)
            color #ffffff
            border-radius computedNum(18)
            margin-left computedNum(22)
            vertical-align top
            margin-top computedNum(13)
